<template>
  <div class="game">
    <!-- <div class="time">TIME: {{ sec }}</div> -->
    <div class="box">
      <div class="tims">
        <div class="tim" :class="{act:i === state.smlt[state.ost]}" :key="i" v-for="i in state.smlt">x{{ i }}</div>
      </div>
      <div class="gme">
        <canvas ref="canvas" :style="offetStyle" class="stage"></canvas>
      </div>
      <div class="monys">
        <div class="mony" :class="{act:i==1}" :key="i" v-for="i in moneyList">{{ i }}</div>
      </div>
    </div>

    <div class="btms">
      <div class="ibtn">
        <div class="ibimg"></div>
        <div class="itxt">加速</div>
      </div>
      <div class="ibbtn" :class="{run: state.running}" @click="play()"></div>
      <div class="ibtn">
        <div class="ibimg lmu"></div>
        <div class="itxt">栏目</div>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { Config } from './com/Config';
import { Game } from './com/Game';
import { TimeoutManager } from './com/TimeoutManager';
import { Tooler } from './com/tooler';

const moneyList = ref([1,2,5,50,100,200,500,1000]);

const state = reactive({
  smlt: [1,2,3,5],
  ost: -1,
  running: false
})



// Config.bus.on("smlt", (val:any)=>{
//   state.smlt = val;
// })
Config.bus.on("ost", (val:any)=>{
  state.ost = val;
})
Config.bus.on("running", (val:any)=>{
  state.running = val;
})

const game = new Game();
const w = window.innerWidth * 0.8 / 5;
const h = w;

const offetStyle = reactive({
  marginTop: -w * 1.5 + "px"
})

const canvas = ref<HTMLCanvasElement | null>(null);

const style = reactive({
  width: '0px',
  height: '0px'
});

const sec = ref(0)
function countTime(){
  sec.value++;
  TimeoutManager.setTimeout(countTime, 1000)
}
countTime();

onMounted(async () => {
  if (canvas.value) {
    console.log(canvas.value);
    game.init(canvas.value, w * 5, h * 7);
    style.width = `${Config.GAME_WIDTH}px`;
    style.height = `${Config.GAME_HEIGHT}px`;
    await Tooler.sleep(5000)
    sec.value+=100;
    await Tooler.sleep(5000)
    sec.value+=100;
    await Tooler.sleep(5000)
    sec.value+=100;
  }
});

const play = async () => {
  game.play();
};
</script>

<style lang="less" scoped>
@import "./btm.less";
.time{
  padding: 20px;
  color: #BFA532
}
.game{
  width: 100vw;
  height: 100vh;
  background: #181818;
}
.box{
  width: 721px;
  height: 953px;
  background: rgba(0, 0, 0, 0.4) url("./asset/bg1.png");
  background-size: contain;
  position: fixed;
  left: 15px;
  top: 10vh;
  z-index: 3;
  .tims{
    display: flex;
    justify-content: space-between;
    margin: 40px auto;
    width: 500px;
    .tim{
      width: 92px;
      height: 35px;
      background: url("./asset/b-nor.png");
      background-size: contain;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(255, 255, 255, 0.4);
      font-size: 20px;
      &.act{
        background-image: url("./asset/b-act.png");
        color: #fff;
      }
    }
  }
  .gme{
    width: 600px;
    height: 600px;
    margin: 1px auto;
    background: rgba(212, 7, 7, 0.339);
    overflow: hidden;
  }
  .monys{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 30px auto;
    width: 630px;
    .mony{
      width: 149px;
      height: 64px;
      background: url("./asset/bt-nor.png");
      background-size: contain;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #9A988F;
      font-size: 26px;
      margin-bottom: 10px;
      &.act{
        background-image: url("./asset/bt-act.png");
        color: #BFA532;
      }
    }
  }
}
.home {
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  margin: auto;
  position: relative;
}
.stage{
  // position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  // left: 0;
  // top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  // z-index: 3;
}

.timers {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
}

.tis {
  flex: 1;
  background: #f0f0f0;
  color: #999;
  padding: 4px;
  text-align: center;
}

.btn {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  width: 50px;
  height: 50px;
  background: red;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}

.cur {
  background: #ff0000;
  color: #fff;
}

.col {
  position: relative;
}

.card {
  color: #000;
  border: solid 1px #999;
  background: #504040;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 20px;
  /* perspective: 1000px; */
}

.d3 {
  position: relative;
  width: 100%;
  height: 100%;
  /* transition: transform 0.8s;
  transform-style: preserve-3d;
  transform: rotateY(30deg);
  background: #504040; */
}
/* .d3:hover{
  transform: rotateY(90deg);
} */


.pic {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ani {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

.idx {
  position: absolute;
  left: 4px;
  top: 4px;
  font: 12px;
  color: #d40707;
  z-index: 2;
  transform: scale(0.7);
}

.txt {
  position: absolute;
  left: 4px;
  bottom: 4px;
  font: 12px;
  color: #f7cd25;
  z-index: 2;
  transform: scale(0.7);
}
</style>
